<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="box">
			
		</div>
		<button id="btn">隐藏</button>
		
		
	</body>
	<script src="jquery-3.2.1.js"></script>
	
	<script type="text/javascript">
		
		//.css
		
//		$('#btn').click(function(){
//			$('#box').css('display','block');
//		})
		
		
		//jquery 提供了一些方法 show() hide() 控制元素显示隐藏
		
		var isShow = true;
		
		/*
		$('#btn').click(function(){
			if(isShow){
				$('#box').show('slow',function(){
//					alert(111);

					$(this).text('盒子出来了');
					
					isShow = false;
					$('#btn').text('显示');
				})
			}else{
				$('#box').hide(2000,function(){
//					alert(111);

					$(this).text(' ');
					isShow = true;
					$('#btn').text('隐藏');
					
				})
			}
		})
		*/
		
		//toggle 开关 如果元素显示则隐藏 ，反之亦然
		
		$('#btn').click(function(){
			$('#box').toggle(3000,function(){
				
				alert(111);
			});
		})
		
	</script>
</html>
